import React, { Component } from 'react'
import { NavBar, Icon, InputItem, Button, Toast } from 'antd-mobile';
import './Login.less'
import { Link } from 'react-router-dom'
import { reqLogin } from '../../http/api'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getUser } from '../../store/modules/login';
class Login extends Component {

    render() {
        let { user, login: { changeUser ,loginAction} ,history:{push}} = this.props
        return (
            <div>
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" />}
                >登录</NavBar>
                <div>{JSON.stringify(user)}</div>
                <div className="enter_user">
                    <InputItem
                        clear
                        placeholder="123"
                        onChange={(val) => changeUser("phone", val)}
                    >账号</InputItem>
                    <InputItem
                        onChange={(val) => changeUser("password", val)}
                        clear
                        placeholder="123"
                    >密码</InputItem>
                    {/* 点击登录,调用仓库中的loginAction,实现登录 ---并且将push传递过去*/}
                    <Button onClick={() =>loginAction(push)} className="btn_login" type="primary" inline style={{ marginRight: '4px' }}>登录</Button>
                    <div className="tologin" onClick={() => this.props.history.push('/register')}>
                        <span>还没有账号，去注册</span>
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log(state);
    return {
        user: getUser(state)
    }
}

const mapDispatchToProps = (dispatch) => {
    return {

        login: bindActionCreators(actions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)
